<template>
	<view class="index">
		<nav-bars backState="2000" bgColor="#fff" fontColor="#000" title="发现"></nav-bars>
		<!-- 顶部 -->
		<view class="topcont">
			<!-- <view class="cxshare">点击右上角...分享朋友圈</view> -->
			<view class="topinput">
				<view class="i_top">
					<view class="i_tCan">
						<view class="i_tInput">
							<view class="i_tiIcon iconfont icon-search"></view>
							<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的动态" placeholder-class="col-ccc" />
						</view>
						<view class="i_tBtn">
							<!-- #ifndef MP-WEIXIN -->
							<view class="i_tbIcon" @click="gitchat()"><text class="iconfont iconhuaban110"></text></view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="i_tbIcon" @click="gitchat()" v-if="!config_id && !config_url"><text class="iconfont iconhuaban110"></text></view>
							<view class="i_tbIcon" v-else @click="gitpouchatshow"><text class="iconfont iconhuaban110"></text></view>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="tabs">
			<text class="tab" :class="{active:TopicListid== item.id}"  v-for="(item,index) in TopicList" :key="index" @click="tabs(item.id)">{{item.name}}</text>
		</view>
		<view class="listtop">
			<view class="list_four">
				<view class="d-comt" v-for="(item,index) in ZoneList" :key="index">
					<view class="comt">
						<image :src="item.banner.path" mode="" class="info-img"></image>
						<view class="des">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 内容 -->
		<view class="i_content">
			<view class="i_cContain">
				<view class="i_cTabs" :style="{ top: navHeight + 'px' }">
					<view class="i_cTab" v-if="tabshow" :class="{ active: contentIndex === 0 }" @tap="contentbtn(0)">
						<view class="i_cTab-txt"><text>微视</text></view>
					</view>
					<view class="i_cTab" :class="{ active: contentIndex === 1 }" @tap="contentbtn(1)">
						<view class="i_cTab-txt"><text>家装圈</text></view>
					</view>
					<view class="i_cTab" v-if="tabshow" :class="{ active: contentIndex === 2 }" @tap="contentbtn(2)">
						<view class="i_cTab-txt"><text>微视排行</text></view>
					</view>
					<view class="i_cTab" v-if="tabshow" :class="{ active: contentIndex === 3 }" @tap="contentbtn(3)">
						<view class="i_cTab-txt"><text>家装排行</text></view>
					</view>
				</view>
				<view class="i_cSwiper">
					<swiper :current="contentIndex" @change="contentBannerChange">
						<swiper-item>
							<scroll-view class="i_cScroll" :scroll-y="isScrollBtm" @scrolltolower="scrolldata">
								<view class="i_cList">
									<view class="i_cLeft" v-for="(item, index) in 2" :key="index">
										<view
											class="i_cItem"
											v-if="indexs % 2 == index"
											v-for="(items, indexs) in listvideo"
											:key="indexs"
											@click="navTo('/pages_design/pages/design/dynamic/player?trendId=' + items.id)"
										>
											<view class="i_cImage"><image :src="items.cover.length != 0 ? items.cover.path : items.media[0].cover" mode="widthFix"></image></view>
											<view class="i_cTag">
												<view class="i_ctIcon"><image src="/static/common/icon_topic.png"></image></view>
												<text>{{ items.title }}</text>
											</view>
											<view class="i_cText omit-2">{{ items.content }}</view>
											<view class="i_cUser">
												<view class="i_cPraise" @tap.stop="trendStores(items, indexs)">
													<view class="i_cpIcon" v-if="items.support_status && items.support_status == 1">
														<image src="/static/common/icon_collection.png"></image>
													</view>
													<view class="i_cpIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
													<view class="i_cpTxt">{{ items.support_num }}</view>
												</view>
												<view class="i_cHead">
													<image v-if="items.user_id.avatar" :src="items.user_id.avatar.path"></image>
													<image v-else src="https://manager.ryz1620.com/static/my/avator.png"></image>
												</view>
												<view class="i_cName omit-1" v-if="items.user_id.username">{{ items.user_id.username }}</view>
												<view class="i_cName omit-1" v-else>*****</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view class="i_cScroll" :scroll-y="isScrollBtm" @scrolltolower="scrolldata">
								<view class="i_cList">
									<view class="i_cLeft" v-for="(item, index) in 2" :key="index">
										<view
											class="i_cItem"
											v-if="indexs % 2 == index"
											v-for="(items, indexs) in list"
											:key="indexs"
											@click="navTo('/pages_design/pages/design/dynamic/dynamic?trendId=' + items.id)"
										>
											<view class="i_cImage" v-if="items.media[0]"><image :src="items.media[0].path" mode="widthFix"></image></view>
											<view class="i_cImage" v-else><image :src="items.media.path" mode="widthFix"></image></view>
											<view class="i_cTag">
												<view class="i_ctIcon"><image src="/static/common/icon_topic.png"></image></view>
												<text>{{ items.title }}</text>
											</view>
											<view class="i_cText omit-2">{{ items.content }}</view>
											<view class="i_cUser">
												<view class="i_cPraise" @tap.stop="trendStores(items, indexs)">
													<view class="i_cpIcon" v-if="items.support_status == 1"><image src="@/static/common/icon_collection.png"></image></view>
													<view class="i_cpIcon" v-else><image src="@/static/common/icon_collection2.png"></image></view>
													<view class="i_cpTxt">{{ items.support_num }}</view>
												</view>
												<view class="i_cHead">
													<image v-if="items.user_id.avatar" :src="items.user_id.avatar.path"></image>
													<image v-else src="https://manager.ryz1620.com/static/my/avator.png"></image>
												</view>
												<view class="i_cName omit-1" v-if="items.user_id.username">{{ items.user_id.username }}</view>
												<view class="i_cName omit-1" v-else>*****</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view class="i_cScroll" :scroll-y="isScrollBtm" @scrolltolower="scrollRanking">
								<view class="Ranking">
									<view
										class="Ranking_view"
										v-for="(item, index) in RankingArr"
										:key="index"
										@click="navTo('/pages_design/pages/design/dynamic/player?trendId=' + item.id)"
									>
										<view class="Ranking_Order">
											<image v-if="index == 0" :src="`${baseImg}/static/adminShop/slices/slices/One.png`"></image>
											<image v-if="index == 1" :src="`${baseImg}/static/adminShop/slices/slices/two.png`"></image>
											<image v-if="index == 2" :src="`${baseImg}/static/adminShop/slices/slices/three.png`"></image>
											<text v-if="index > 2">{{ index + 1 }}</text>
										</view>
										<view class="Ranking_center">
											<view class="Ranking_Title TextLenght" :style="{ 'margin-top': index > 2 ? '0' : '-6rpx' }">{{ item.title }}</view>
											<view class="Ranking_Title1 TextLenght">{{ item.content }}</view>
											<view class="Ranking_Tips">
												<view class="Ranking_Icon">
													<view class="Ranking_img"><image :src="`${baseImg}/static/adminShop/slices/slices/click.png`"></image></view>
													<view class="Ranking_num">{{ item.support_num }}</view>
												</view>
												<view class="Ranking_Icon">
													<view class="Ranking_img"><image :src="`${baseImg}/static/adminShop/slices/slices/play.png`"></image></view>
													<view class="Ranking_numTwo">{{ item.video_num }}</view>
												</view>
											</view>
										</view>
										<view class="Ranking_Cove">
											<image :src="item.cover.length != 0 ? item.cover.path : item.media[0].cover"></image>
											<view class="Ranking_Position"><image :src="`${baseImg}/static/adminShop/slices/slices/vidio.png`"></image></view>
										</view>
									</view>
									<view class="PageNull" v-if="RankingArr.length == 0">
										<image src="https://cos.ryz1620.com/liankun/static/nullBg.png"></image>
										<view class="PageNullText">暂无内容</view>
									</view>
									<view style="flex: 1;" v-if="RankingArr.length > 0"><u-loadmore :status="loadStatus"></u-loadmore></view>
								</view>
							</scroll-view>
						</swiper-item>
						<!-- 家装排行 -->
						<swiper-item>
							<scroll-view class="i_cScroll" :scroll-y="isScrollBtm" @scrolltolower="scrollRanking">
								<view class="Ranking">
									<view
										class="Ranking_view"
										v-for="(item, index) in RankingArr"
										:key="index"
										@click="navTo('/pages_design/pages/design/dynamic/dynamic?trendId=' + item.id)"
									>
										<view class="Ranking_Order">
											<image v-if="index == 0" :src="`${baseImg}/static/adminShop/slices/slices/One.png`"></image>
											<image v-if="index == 1" :src="`${baseImg}/static/adminShop/slices/slices/two.png`"></image>
											<image v-if="index == 2" :src="`${baseImg}/static/adminShop/slices/slices/three.png`"></image>
											<text v-if="index > 2">{{ index + 1 }}</text>
										</view>
										<view class="Ranking_center">
											<view class="Ranking_Title TextLenght" :style="{ 'margin-top': index > 2 ? '0' : '-6rpx' }">{{ item.title }}</view>
											<view class="Ranking_Title1 TextLenght">{{ item.content }}</view>
											<view class="Ranking_Tips">
												<view class="Ranking_Icon">
													<view class="Ranking_img"><image :src="`${baseImg}/static/adminShop/slices/slices/click.png`"></image></view>
													<view class="Ranking_num">{{ item.support_num }}</view>
												</view>
												<!-- <view class="Ranking_Icon">
													<view class="Ranking_img"><image :src="`${baseImg}/static/adminShop/slices/slices/play.png`"></image></view>
													<view class="Ranking_numTwo">{{ item.video_num }}</view>
												</view> -->
											</view>
										</view>
										<view class="rankingCover">
											<image :src="item.cover.length != 0 ? item.cover.path : item.media[0].path"></image>
											<!-- <view class="Ranking_Position"><image :src="`${baseImg}/static/adminShop/slices/slices/vidio.png`"></image></view> -->
										</view>
									</view>
									<view class="PageNull" v-if="RankingArr.length == 0">
										<image src="https://cos.ryz1620.com/liankun/static/nullBg.png"></image>
										<view class="PageNullText">暂无内容</view>
									</view>
									<view style="flex: 1;" v-if="RankingArr.length > 0"><u-loadmore :status="loadStatus"></u-loadmore></view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="rightfixed">
			<!-- 分享 -->
			<view class="iconfont icontubiaozhizuomoban_fuzhi" v-if="showright"><button open-type="share" class="sharebtn"></button></view>
			<!-- 电话-->
			<view class="iconfont iconhuaban3" v-if="showright" @click="callPhone('07738282291')"></view>
			<!-- 购物车 -->
			<view class="iconfont icon-shopping" v-if="showright" @click="malldcart"></view>
			<!-- 导航 -->
			<view class="iconfont iconhuaban4" v-if="showright" @click="openLocation"></view>
			<!-- 显示 -->
			<view class="iconfont icon-arrow-left-copy" v-if="showright" @click="iconshow"></view>
			<!-- 隐藏 -->
			<view class="iconfont icon-arrow-up" v-if="!showright" @click="iconshow"></view>
		</view>
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage="startmessage" bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
	</view>
</template>

<script>
import service_mall from '@/service/mall.js';
import service_now from '@/service/now.js';
import service_design from '@/service/design';
import LivePlayer from '@/service/player.js';
import URL from '@/config/url.js';

export default {
	components: {
		// #ifdef MP-WEIXIN
		cell: 'plugin://contactPlugin/cell'
		// #endif
	},
	data() {
		return {
			latitude: '',
			longitude: '',
			bannerlist: [],
			userId: '',
			searchVal: '',
			// latitude: '',
			// longitude: '',
			showright: false,
			// 是否滑动到底部
			isScrollBtm: true,
			isScrollFlag: false,
			contentIndex: 0,
			list: [],
			listvideo: [],
			type: 1,
			TopicList: [],
			TopicListid: '',
			ZoneList: [],
			page: 1,
			pagesize: 20,
			RankPage: 1,
			tabshow: false,
			config_id: '',
			config_url: '',
			pouchatshow: false,
			baseImg: this.$static,
			RankingArr: [],
			loadStatus: 'loadmore',
			types:1,//0图文,1视频
		};
	},
	computed: {
		navHeight() {
			return this.$store.state.system.navBarHeight;
		} // Nav栏高度
	},
	onShow() {
		this.getLvieConfig();
	},
	onLoad(params) {
		this.$utils.getUrl();
		this.gitConfig();
		this.gitwxConfig();
		let lng = uni.getStorageSync('location_longitude');
		if (lng) {
			this.longitude = uni.getStorageSync('location_longitude');
			this.latitude = uni.getStorageSync('location_latitude');
		} else {
			this.getlng();
		}
		this.getRecommendTrend();
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		if (params.share_uid) {
			let shareuId = params.share_uid;
			this.$store.commit('index/SET_shareuId', shareuId);
			if (token && shareuId) {
				service_mall.getPromoter({ share_uid: shareuId }).then(res => {});
			}
		}
		// #ifdef MP-WEIXIN
		gio('setPage', {
			pageName: '生活'
		});
		// #endif
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		if (scrollTop >= 100) {
			this.background = '#fff';
		} else {
			this.background = 'rgba(255,255,255,0)';
		}
		if (this.isScrollBtm) {
			if (!this.isScrollFlag) {
				this.isScrollBtm = false;
			}
		}
	},
	onReachBottom() {
		this.isScrollBtm = true;
		this.isScrollFlag = true;
		setTimeout(() => {
			this.isScrollFlag = false;
		}, 500);
	},
	onShareAppMessage(res) {
		let that = this;
		if (res.from === 'button') {
		}
		return {
			title: '融易装',
			path: '/pages/now/discovery/index?share_uid=' + this.userId,
			success: function(res) {}
		};
	},
	methods: {
		// 板块
		// getTopicList() {
		// 	service_now.getSectionList({
		// 	}).then(res => {
		// 		if (res.code == 1) {
		// 				this.TopicList = res.data
		// 				this.TopicListid = res.data[0].id
		// 				// this.getZoneList()
		// 		}
		// 	});
		// },
		//直播配置开关
		getLvieConfig() {
			LivePlayer.getLvieConfig()
				.then(res => {
					if (res.code === 1) {
						console.log(res.data);
						if (res.data.value == 0) {
							this.tabshow = false;
							this.contentIndex = 1;
						} else {
							this.tabshow = true;
							this.contentIndex = 0;
						}
					} else {
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		searchData() {
			this.page = 1;
			(this.list = []), (this.listvideo = []), this.getRecommendTrend();
		},
		trendStores(item, index) {
			let status = item.support_status;
			if (status == 1) {
				uni.showModal({
					title: '提示',
					content: '确认取消点赞?',
					success: res => {
						if (res.confirm) {
							service_mall
								.gitTrendstatus({
									trend_id: item.id,
									status: 0
								})
								.then(res => {
									if (res.code == 1) {
										this.list[index].support_status = 0;
										this.list[index].support_num--;
									} else {
										this.$utils.showErr({
											title: res.msg == '用户ID不能空'?'请先登陆':res.msg 
										});
									}
								});
						} else if (res.cancel) {
							return;
						}
					}
				});
			} else {
				service_mall
					.gitTrendstatus({
						trend_id: item.id,
						status: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.list[index].support_status = 1;
							this.list[index].support_num++;
						} else {
							this.$utils.showErr({
								title: res.msg == '用户ID不能空'?'请先登陆':res.msg 
							});
						}
					});
			}
		},
		// tabs(id){
		// 	this.TopicListid = id
		// 	this.getZoneList()
		// },
		// // 专区
		// getZoneList() {
		// 	service_now.getZoneList({
		// 		community_id:this.TopicListid,
		// 		page:1,
		// 		pagesize:4,
		// 	}).then(res => {
		// 		if (res.code == 1) {
		// 			this.ZoneList = res.data
		// 		}
		// 	});
		// },
		getlng() {
			let that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitud;
					uni.setStorageSync('location_longitude', res.longitude);
					uni.setStorageSync('location_latitude', res.latitude);
				}
			});
		},
		// 内容-轮播图切换
		contentBannerChange(e) {
			this.contentIndex = e.detail.current;
			if (e.detail.current == 0) {
				this.contentBannerToggle(0);
			} else if (e.detail.current == 1) {
				this.contentBannerToggle(1);
			} else if (e.detail.current == 2) {
				this.types=1;
				this.getRankingList(2);
			}else{
				this.types=0;
				this.getRankingList(3);
			}
		},
		contentbtn(index) {
			this.contentIndex = index;
		},
		contentBannerToggle(index) {
			if (index == 0) {
				this.type = 1;
			} else if (index == 1) {
				this.type = 0;
			} else if (index == 2) {
				this.getRankingList();
			}else if (index == 3) {
				this.getRankingList();
			}

			this.page = 1;
			(this.list = []), (this.listvideo = []), this.getRecommendTrend();
			if (this.contentIndex != index) this.contentIndex = index;
		},
		scrollRanking() {
			var that = this;
			that.RankPage++;
			that.loadStatus = 'loading';
			uni.showLoading({
				title: '加载中...'
			});
			let params = {
				page: that.RankPage
			};
			service_now.getRankList(params).then(res => {
				if (res.code == 1) {
					// console.log(res.data);
					const data = res.data;
					if (!data.length) {
						that.loadStatus = 'nomore';
						return;
					} else {
						this.loadStatus = 'loadmore';
					}
					that.RankingArr = that.RankingArr.concat(data);
				} else {
					that.$utils.showErr({
						title: res.msg
					});
				}
			});
			setTimeout(function() {
				uni.hideLoading();
				// this.loadStatus = 'loadmore';
			}, 500);
		},
		getRankingList() {
			var that = this;
			that.RankPage = 1;
			uni.showLoading({
				title: '加载中...'
			});
			service_now
				.getRankList({
					page: that.RankPage,
					type:that.types
				})
				.then(res => {
					if (res.code == 1) {
						// console.log(res.data);
						const data = res.data;
						that.RankingArr = data;
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
					} else {
						that.$utils.showErr({
							title: res.msg
						});
					}
				});
		},
		iconshow() {
			this.showright = !this.showright;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		toONEshop(url) {
			uni.navigateTo({
				url
			});
		},
		// 获取企业微信callme配置
		gitConfig() {
			service_mall
				.getCallMeConfig({
					partner_type: 'root',
					partner_id: 1
				})
				.then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
		},
		gitwxConfig() {
			service_mall
				.getwxMeConfig({
					partner_type: 'root',
					partner_id: 1
				})
				.then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
		},
		gitpouchatshow() {
			this.pouchatshow = true;
		},
		wxCodeClick() {
			this.pouchatshow = false;
		},
		gitwxchat() {
			wx.openCustomerServiceChat({
				extInfo: {
					url: this.config_url
				},
				corpId: this.$env.CORPID,
				success(res) {}
			});
		},
		// 客服
		gitchat() {
			uni.showToast({
				title: '哎呀!不好意思，暂未配置客服...',
				icon: 'none',
				duration: 2000
			});
			// let token = uni.getStorageSync('token');
			// if (token) {
			// 	uni.navigateTo({
			// 		url: '/pages_customer/pages/index?partner_type=root&partner_id=0'
			// 	});
			// } else {
			// 	uni.showModal({
			// 		title: '提示！',
			// 		content: '请先登录！',
			// 		success: function(s) {
			// 			if (s.confirm) {
			// 				uni.navigateTo({
			// 					url: '/pages_login/pages/login/login/index'
			// 				});
			// 			}
			// 		}
			// 	});
			// }
		},
		// 电话
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// 购物车
		malldcart() {
			uni.navigateTo({ url: `/pages_mall/pages/mall/cart/cart` });
		},
		openLocation() {
			let latitude = Number(this.latitude);
			let longitude = Number(this.longitude);
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				name: '联坤家居广场',
				address: '桂林市叠彩区环城北一路39号',
				scale: 20
			});
		},
		//
		scrolldata() {
			this.page++, this.getRecommendTrend();
		},
		// 推荐动态
		getRecommendTrend() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			service_design
				.getRecommendTrend({
					keyword: this.searchVal,
					type: this.type,
					page: this.page,
					pagesize: this.pagesize
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						if (this.type == 0) {
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i]); // 加载的数据追加在上一页后面
							}
						} else {
							for (var i = 0; i < res.data.length; i++) {
								this.listvideo.push(res.data[i]); // 加载的数据追加在上一页后面
							}
						}
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	width: 100vw;
	height: 100vh;
	background: #fff;
	display: flex;
	flex-flow: column;
	overflow: hidden;
}
.TextLenght {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.TextLenghtTwo {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.topcont {
	position: relative;
	height: 90rpx;
}
.topinput {
	width: 100%;
	z-index: 99;
}
.i_top {
	margin-top: 20rpx;
	padding-left: 32rpx;
	padding-right: 120rpx;
	position: relative;
	.i_tCan {
		width: 100%;
	}
	.i_tBtn {
		width: 100rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 10rpx;
		top: 0;
	}
	.i_tbIcon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #666;
		font-size: 42rpx;
	}
	.i_tbTxt {
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		margin-top: 4rpx;
	}
	.i_tInput {
		height: 60rpx;
		border-radius: 36rpx;
		background: #f1f1f1;
		position: relative;
		overflow: hidden;
		& > input {
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			padding: 0 24rpx 0 72rpx;
		}
	}
	.i_tiIcon {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		color: #ccc;
		font-size: 32rpx;
		margin-top: -16rpx;
		position: absolute;
		top: 50%;
		left: 28rpx;
	}
}
.i_tSwiper {
	position: relative;
}
.i_tDots {
	width: 100%;
	position: absolute;
	bottom: 15rpx;
	left: 0;
	display: flex;
	justify-content: center;
}
.i_tDot {
	width: 50rpx;
	height: 6rpx;
	margin: 0 5rpx;
	&.active .i_tIcon {
		background: #ffd425;
	}
	.i_tIcon {
		width: 50rpx;
		height: 6rpx;
		background: rgba(255, 255, 255, 0.5);
	}
}
// 功能
.i_fun {
	display: flex;
	padding: 0 30rpx;
	.i_fItem {
		flex: 1;
	}
	.i_fIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 40rpx auto 0;
	}
	.i_fTxt {
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 24rpx;
		margin-top: 14rpx;
	}
}
.rightfixed {
	position: fixed;
	right: 10rpx;
	bottom: 15%;
	z-index: 999;
	view {
		width: 70rpx;
		height: 70rpx;
		border: 1px #dfdfdf solid;
		border-radius: 50%;
		line-height: 70rpx;
		text-align: center;
		background: rgba(255, 255, 255, 0.5);
		color: #888;
		margin-bottom: 20rpx;
		position: relative;
	}
}
.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}
.topimg {
	position: relative;
	margin-top: 20rpx;
	.tops {
		position: absolute;
		left: 50rpx;
		top: 30rpx;
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		text-shadow: 1px 1px 2px #333;
	}
	.topm {
		position: absolute;
		bottom: 40rpx;
		right: 60rpx;
		background: #eb1d21;
		color: #fff;
		border-radius: 40rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: inline-block;
		padding: 0 25rpx;
		font-size: 26rpx;
	}
}
.cxshare {
	position: absolute;
	top: 5rpx;
	right: 100rpx;
	z-index: 9;
	font-size: 18rpx;
	background: rgba(242, 18, 29, 0.4);
	padding: 4rpx 15rpx;
	border-radius: 20rpx;
	color: #fff;
}
// 内容
.i_content {
	height: 100%;
	.i_cLine {
		height: 16rpx;
		background: #f6f7fb;
	}

	.i_cContain {
		width: 100vw;
		height: 100%;
		display: flex;
		flex-flow: column;
		position: relative;
	}

	.i_cTabs {
		height: 112rpx;
		background: #fff;
		position: relative;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.i_cAdd {
		width: 104rpx;
		height: 104rpx;
		margin-top: 8rpx;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		& > image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.i_cTab {
		height: 112rpx;
		line-height: 122rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #6c6c6c;
		padding: 0 32rpx;
		position: relative;
		display: inline-block;

		&.active {
			color: #333;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}

		&.active .i_cTab-txt::after {
			content: '';
			background-color: #c3ab7c;
			width: 52rpx;
			height: 8rpx;
			position: absolute;
			bottom: 19rpx;
			left: 50%;
			border-radius: 6rpx;
			transform: translate(-50%, 0%);
			z-index: 1;
		}

		.i_cTab-txt {
			height: 100%;
			position: relative;

			& > text {
				position: relative;
				z-index: 2;
			}
		}
	}

	.i_cSwiper {
		flex: 1;
		overflow: hidden;
	}

	.i_cScroll {
		height: 100%;
	}

	.i_cList {
		padding: 0 32rpx;
		display: flex;
		padding-bottom: 20rpx;
	}

	.i_cLeft {
		flex: 1;
	}

	.i_cLeft:first-child {
		padding-right: 12rpx;
	}

	.i_cLeft:last-child {
		padding-left: 12rpx;
	}

	.i_cRight {
		flex: 1;
	}

	.i_cItem {
		width: 100%;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
	}

	.i_cImage {
		width: 100%;
		background: #f6f7fb;
		height: 360rpx;
		overflow: hidden;

		> image {
			min-height: 360rpx;
		}
	}

	.i_cTag {
		height: 44rpx;
		line-height: 44rpx;
		color: #a58f6d;
		font-size: 20rpx;
		padding: 0 16rpx 0 48rpx;
		margin: 16rpx 16rpx 0;
		border-radius: 22rpx;
		background: #f9f6f3;
		position: relative;
		display: inline-block;
		overflow: hidden;

		.i_ctIcon {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 4rpx;
			left: 4rpx;
		}
	}

	.i_cText {
		line-height: 36rpx;
		font-size: 24rpx;
		margin: 16rpx 20rpx 0;
	}

	.i_cUser {
		margin: 16rpx 16rpx 0;
	}

	.i_cHead {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		background: #f6f7fb;
		float: left;
		overflow: hidden;
	}

	.i_cPraise {
		height: 36rpx;
		color: #939393;
		font-size: 20rpx;
		float: right;
		display: flex;
		align-items: center;
	}

	.i_cpIcon {
		width: 32rpx;
		height: 32rpx;
		margin: 0 8rpx;
	}

	.i_cName {
		height: 36rpx;
		line-height: 36rpx;
		color: #939393;
		font-size: 20rpx;
		overflow: hidden;
	}
}
.tabs {
	white-space: nowrap;
	line-height: 90rpx;
	margin-left: 30rpx;
	overflow-x: auto;
	.tab {
		padding-right: 30rpx;
	}
	.active {
		font-weight: bold;
		font-size: 32rpx;
	}
}
.listtop {
	padding: 0 20rpx;
}
.list {
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 24rpx 0;
	&:last-child {
		border-bottom: 0;
	}
	.list-left {
		.des {
			width: 356rpx;
			height: 128rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44rpx;
			color: #0a0605;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		.time {
			padding-top: 28rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 300;
			line-height: 24rpx;
		}
	}
	.info-img {
		width: 250rpx;
		height: 190rpx;
		border-radius: 8rpx;
	}
}
.list_four {
	overflow: hidden;
	.d-comt {
		width: 50%;
		display: inline-block;
		.comt {
			margin: 10rpx;
			height: 220rpx;
			position: relative;
			background: #ccc;
			border-radius: 10rpx;
			overflow: hidden;
			.des {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				line-height: 55rpx;
				background: rgba(0, 0, 0, 0.2);
				padding: 0 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #fff;
			}
		}
	}
}
.Ranking {
	padding: 0 32rpx;
	padding-bottom: 20rpx;
	.Ranking_view {
		border-top: 1px solid #ebebeb;
		flex: 1;
		padding-top: 40rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 44rpx;
		.Ranking_Order {
			width: 44rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #9a9a9a;
		}
		.Ranking_center {
			flex: 1;
			margin: 0 30rpx 0 17rpx;
			.Ranking_Title {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #2a2a2a;
				margin-top: -6rpx;
			}
			.Ranking_Title1 {
				margin-bottom: 35rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #939393;
				margin-top: -6rpx;
			}
			.Ranking_Tips {
				display: flex;
				align-items: center;
				.Ranking_Icon {
					display: flex;
					align-items: center;
					margin-right: 38rpx;
					.Ranking_img {
						width: 34rpx;
						height: 34rpx;
						margin-right: 14rpx;
					}
					.Ranking_num {
						font-size: 26rpx;
						font-weight: 500;
						color: #f14744;
					}
					.Ranking_numTwo {
						font-size: 26rpx;
						font-weight: 500;
						color: #999999;
					}
				}
			}
		}
		.Ranking_Cove {
			width: 240rpx;
			height: 144rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			.Ranking_Position {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.rankingCover {
			width: 230rpx;
			height: 210rpx;
			border-radius: 16rpx;
		}
	}
}
// 客服弹框
.pouchat {
	position: fixed;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;

	.poucont {
		position: absolute;
		top: 30%;
		left: 15%;
		right: 15%;

		.icon-close {
			width: 80rpx;
			height: 80rpx;
			font-size: 70rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			margin: 30rpx auto;
		}
	}

	.chatlist {
		background: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.chatml {
		position: relative;
		padding: 20rpx;
		padding-left: 100rpx;
		min-height: 100rpx;

		.cell-service {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 10;
			.cell--bubble {
				width: 100%;
			}
		}

		text {
			display: block;
			line-height: 40rpx;
		}

		.t1 {
			font-size: 32rpx;
		}

		.t2 {
			font-size: 24rpx;
			color: #999;
		}

		image {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			left: 15rpx;
			top: 25rpx;
		}
	}
}
.PageNull {
	width: 500rpx;
	height: 450rpx;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);

	.PageNullText {
		text-align: center;
		color: #939393;
	}
}
</style>
